<template>
	<view class="e-refresh">
		<view class="e-refresh__container" >
			<view class="e-refresh__container-left">
				<!-- 非加载中(继续下拉刷新、松手立即刷新状态图片) -->
				<template v-if="status !== R.Loading">
					<image :class="leftImageClass" :style="[leftImageStyle, imgStyle]" :src="leftImage.src" v-if="leftImage.img" />
					<view :class="leftImageClass" :style="[leftImageStyle]" v-else>
						<e-icon :name="leftImage.src" :customStyle="imgStyle" :color="defaultThemeColor" :size="leftImageStyle.fontSize"></e-icon>
					</view>
				</template>

				<template v-else>
					<!-- 加载状态图片 -->
					<!-- #ifndef APP-NVUE -->
					<image
						class="e-refresh__container-left__image"
						:class="[refreshingAnimated && 'is-line-loading', unit === 'rpx' && 'is-rpx', unit === 'px' && 'is-px']"
						:style="[leftImageStyle, imgStyle]"
						:src="leftImage.src"
						v-if="leftImage.img"
					/>
					<view class="e-refresh__container-left__image" :style="[leftImageStyle]" v-else>
						<e-loading-icon :customStyle="imgStyle" :color="defaultThemeColor" :size="leftImageStyle.fontSize"></e-loading-icon>
					</view>
					<!-- #endif -->
					<!-- 在nvue中，加载状态loading使用系统loading -->
					<!-- #ifdef APP-NVUE -->
					<view :style="[{ 'margin-right':  addUnit(12, unit) }]">
						<loading-indicator
							class="e-refresh__container-left__loading"
							:class="[isIos ? { 'is-ios-rpx': unit === 'rpx', 'is-ios-px': unit === 'px' } : { 'is-android-rpx': unit === 'rpx', 'is-android-px': unit === 'px' }]"
							:style="[{ color: defaultThemeColor }, imgStyle]"
							:animating="true"
						/>
					</view>
					<!-- #endif -->
				</template>
			</view>
			<!-- 右侧文字内容 -->
			<view class="e-refresh__container-right">
				<!-- 右侧下拉刷新状态文字 -->
				<text class="e-refresh__container-right__text" :style="[rightTextStyle, titleStyle]">{{ currentTitle }}</text>
				<!-- 右侧下拉刷新时间文字 -->
				<text
					v-if="refresherTimeText"
					class="e-refresh__container-right__text"
					:class="{ 'zp-r-right-time-text-rpx': unit === 'rpx', 'zp-r-right-time-text-px': unit === 'px' }"
					:style="[{ color: defaultThemeColor }, updateTimeStyle]"
				>
					{{ refresherTimeText }}
				</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import mpMixin from '../../libs/mixin/mpMixin';
/**
 * radioRroup 高性能ScrollView组件
 * @description 不同于list组件需要配合list-item组件使用，该组件自由度更高，适用于瀑布流等内容布局较为不规则的场景
 * @tutorial https://www.uviewui.com/components/radio.html
 * @property {Object} paging-style 设置z-paging的style，部分平台(如微信小程序)无法直接修改组件的style，可使用此属性代替
 * @property {String} height z-paging的高度，优先级低于pagingStyle中设置的height，传字符串，如100px、100rpx、100%
 * @property {String} width z-paging的宽度，优先级低于pagingStyle中设置的width，传字符串，如100px、100rpx、100%
 * @property {Boolean} use-page-scroll 使用页面滚动，默认为否
 * @property {Boolean} use-virtual-list 是否使用虚拟列表，默认为否
 * @property {Boolean} fixed z-paging是否使用fixed布局，若使用fixed布局，则z-paging的父view无需固定高度，z-paging高度默认为100%，默认为是(当使用内置scroll-view滚动时有效)
 * @property {Boolean} use-chat-record-mode 使用聊天记录模式，默认为否
 * @event {Function} change 任一个radio状态发生变化时触发
 * @example <e-refresh ></e-refresh>
 */
export default defineComponent({
	name: 'e-refresh',
	mixins: [mpMixin]
});
</script>
<script lang="ts" setup>
import { computed } from 'vue';
import { Enum } from '../e-scroll-view/env';
import { sys, isString } from '../../libs/utils';

// 添加单位
const addUnit = (value?: string | number, unit?: string) => {
	if (isString(value)) {
		let tempValue: string | number = value;
		tempValue = tempValue.replace('rpx', '').replace('upx', '').replace('px', '');
		if (value.indexOf('rpx') === -1 && value.indexOf('upx') === -1 && value.indexOf('px') !== -1) {
			tempValue = parseFloat(tempValue) * 2;
		}
		value = tempValue;
	}
	return unit === 'rpx' ? value + 'rpx' : Number(value) / 2 + 'px';
};

const props = defineProps<{
	status: number;
	defaultThemeColor: string;
	defaultText?: string;
	pullingText?: string;
	refreshingText?: string;
	completeText?: string;
	goF2Text?: string;
	defaultImg?: string;
	pullingImg?: string;
	refreshingImg?: string;
	completeImg?: string;
	refreshingAnimated: boolean;
	imgStyle?: string|Record<string,any>;
	titleStyle?: string|Record<string,any>;
	updateTimeStyle?: string|Record<string,any>;
	refresherTimeText?: string;
	unit?: string;
}>();

const R = Enum.Refresher;
const isIos = sys().platform === 'ios';


const IconName = {
	arrow: 'arrow-upward',
	success: 'checkmark-circle'
};

// 当前状态数组
const statusTextArr = computed(() => {
	return [props.defaultText, props.pullingText, props.refreshingText, props.completeText, props.goF2Text];
});

// 当前状态文字
const currentTitle = computed(() => {
	return statusTextArr.value[props.status] || props.defaultText;
});
// 左侧图片class
const leftImageClass = computed(() => {
	const preSizeClass = `is-${props.unit}`;
	if (props.status === R.Complete) return preSizeClass;
	return `e-refresh__container-left__image ${preSizeClass} ${props.status === R.Default ? 'is-down' : 'is-top'}`;
});
// 左侧图片style
const leftImageStyle = computed(() => {
	const size = props.refresherTimeText ? addUnit(36, props.unit) : addUnit(34, props.unit);
	return { width: size, height: size, fontSize: size, 'margin-right': props.refresherTimeText ? addUnit(20, props.unit) : addUnit(9, props.unit) };
});
// 左侧图片src
const leftImage = computed(() => {
	const status = props.status;
	if (status === R.Default) {
		if (!!props.defaultImg)
			return {
				src: props.defaultImg,
				img: props.defaultImg.indexOf('/') !== -1
			};
		return {
			src: IconName.arrow,
			img: false
		};
	} else if (status === R.ReleaseToRefresh) {
		if (!!props.pullingImg)
			return {
				src: props.pullingImg,
				img: props.pullingImg.indexOf('/') !== -1
			};
		if (!!props.defaultImg)
			return {
				src: props.defaultImg,
				img: props.defaultImg.indexOf('/') !== -1
			};
		return {
			src: IconName.arrow,
			img: false
		};
	} else if (status === R.Loading) {
		if (!!props.refreshingImg) {
			return {
				src: props.refreshingImg,
				img: props.refreshingImg.indexOf('/') !== -1
			};
		}
		return {
			src: '',
			img: false
		};
	} else if (status === R.Complete) {
		if (!!props.completeImg)
			return {
				src: props.completeImg,
				img: props.completeImg.indexOf('/') !== -1
			};
		return {
			src: IconName.success,
			img: false
		};
	} else if (status === R.GoF2) {
		return {
			src: IconName.arrow,
			img: false
		};
	}
	return {
		src: '',
		img: true
	};
});

// 右侧文字style
const rightTextStyle = computed(() => {
	let stl:Record<string,any> = {};
	// #ifdef APP-NVUE
	const textHeight = props.refresherTimeText ? addUnit(40, props.unit) : addUnit(80, props.unit);
	stl = { height: textHeight, 'line-height': textHeight };
	// #endif
	stl['color'] = props.defaultThemeColor;
	stl['font-size'] = addUnit(30, props.unit);
	return stl;
});
</script>

<style lang="scss" scoped>
@import '../../libs/theme/refresh.scss';
</style>